<template>
  <div class="el-scrollbar__wrap">
    <div class="box">
      <div class="top-box">
        <div class="top_content">
          <i
            class="el-icon-menu"
            style="margin-right: 10px; line-height: 30px"
          ></i>
          公司制度
        </div>
        <div class="top_fan">
          <el-button type="primary" @click="homeMeeting" class="fh"
            >返回</el-button
          >
        </div>
      </div>

      <div v-if="meetingNotice.isred == 0" style="width: 100%; display: flex;">
        <div style="width: 350px; font-size: 12px; width: 500px">
          <p>
            已查看：
            <el-button
              v-for="(item, index) in isread"
              :key="index"
              type="text"
              @click="userInfo(item)"
              >{{ item.user.name }}</el-button
            >
          </p>
          <p>
            未查看：
            <el-button
              v-for="(item, index) in noread"
              :key="index"
              type="text"
              @click="userInfo(item)"
              >{{ item.user.name }}</el-button
            >
          </p>
        </div>
        <div
          style="
            align-self: center;
            width: 595px;
            min-height: 842px;
            vertical-align: middle;
            box-shadow: 2px 2px 10px #909090;
            position: relative;
          "
        >
          <h1
            style="
              color: red;
              text-align: center;
              padding-top: 35px;
              font-family: NSimSun;
            "
          >
            {{ fatherMeanName }}文件
          </h1>
          <div
            style="
              text-align: center;
              font-size: 12px;
              padding-bottom: 8px;
              margin: 0 70px;
              border-bottom: 2px solid red;
            "
          >
            <span>{{ meetingNotice.docnumber }}</span>
          </div>
          <div>
            <h3 style="text-align: center">{{ meetingNotice.systemName }}</h3>
          </div>
          <div
            style="padding: 10px 70px; font-size: 13px; margin-bottom: 170px"
            v-html="meetingNotice.detailsOfCompanySystem"
          ></div>
          <div
            style="
              padding: 0 70px;
              font-size: 12px;
              position: absolute;
              bottom: 50px;
              width: 100%;
            "
          >
            <div
              style="
                text-align: right;
                margin-bottom: 40px;
                font-size: 14px;
                position: relative;
              "
            >
              <officialSeals
                :companyName="meetingNotice.company.companyName"
                :departName="meetingNotice.office.name"
                style="position: absolute; right: -20px; bottom: -60px"
              >
              </officialSeals>
              {{ meetingNotice.time }}
            </div>
            <div
              style="
                border-bottom: 1px solid #000;
                margin: 8px 0;
                font-weight: 600;
                padding-bottom: 7px;
              "
            >
              主题词：{{ meetingNotice.subjecthead }}
            </div>
            <div
              style="
                border-bottom: 1px solid #000;
                margin: 8px 0;
                padding-bottom: 7px;
              "
            >
              抄送：{{ meetingNotice.person }}
            </div>
            <div
              style="
                border-bottom: 1px solid #000;
                display: flex;
                margin: 8px 0;
                padding-bottom: 7px;
              "
            >
              <div style="flex: 1">{{ meetingNotice.company.companyName }}</div>
              <div>{{ meetingNotice.remarks }}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="meetingNotice.isred != 0"
        style="width: 100%; display: flex; overflow: hidden"
      >
        <div style=" font-size: 12px; width: 30%;">
          <p>
            已查看：
            <el-button
              v-for="(item, index) in isread"
              :key="index"
              type="text"
              @click="userInfo(item)"
              >{{ item.user.name }}</el-button
            >
          </p>
          <p>
            未查看：
            <el-button
              v-for="(item, index) in noread"
              :key="index"
              type="text"
              @click="userInfo(item)"
              >{{ item.user.name }}</el-button
            >
          </p>
        </div>
        <div
          style="
            width: 595px;
            height: 842px;
            vertical-align: middle;
            box-shadow: 2px 2px 10px #909090;
          "
        >
          <h2 class="meetingTitle">
            {{ meetingNotice.systemName }}
          </h2>
          <div class="publisher-box">
            <div class="publisher-box-left">
              <div class="publisher">
                发布时间：<span>{{ meetingNotice.createDate }}</span>
              </div>
            </div>
          </div>
          <div style="text-align: center; font-size: 12px; padding-top: 16px">
            发布人：<span style="margin-right: 20px">{{
              meetingNotice.updateBy.name
            }}</span>
            <!-- 会议地点：<span>{{meetingNotice.mettingAddress}}</span> -->
          </div>
          <div class="meetingContentParent">
            <div
              class="meetingContent"
              v-html="meetingNotice.detailsOfCompanySystem"
            ></div>
          </div>
        </div>
      </div>
      <div class="bottom_upper">
        <el-button type="text" @click="lowMeetingNotice">下一条</el-button>
        <el-button type="text" @click="upMeetingNotice">上一条</el-button>
      </div>
    </div>
    <el-dialog width="25%" :visible.sync="userInfoDialog" title="用户信息">
      <div>
        <p style="line-height: 25px">姓名：{{ userInfos.name }}</p>
        <p style="line-height: 25px">性别：{{ userInfos.sex }}</p>
        <p style="line-height: 25px">电话：{{ userInfos.phone }}</p>
        <p style="line-height: 25px">部门：{{ userInfos.office.name }}</p>
        <p style="line-height: 25px">岗位：{{ userInfos.post.name }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userInfoDialog = false">关闭</el-button>
        <el-button
          size="small"
          type="primary"
          v-if="userInfos.readFlag == 0"
          @click="saveNotify(userInfos.id)"
          >通知TA</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import officialSeals from "./officialSeals";
export default {
  data() {
    return {
      meetingNotice: {},
      lows: 1, //上下页
      upp: 0,
      meetingId: "", //通知公告Id
      remark: "",
      isread: [],
      noread: [],
      userInfoDialog: false,
      userInfos: {
        id: "",
        name: "",
        sex: "",
        phone: "",
        office: "",
        post: "",
        readFlag: "",
      },
    };
  },
  components: {
    officialSeals,
  },
  computed: {
    fatherMeanName: {
      get() {
        return this.$store.state.common.fatherMeanName;
      },
    },
  },
  methods: {
    userInfo(obj) {
      this.userInfos.id = obj.user.id;
      this.userInfos.name = obj.user.name;
      this.userInfos.sex = obj.user.sex;
      this.userInfos.phone = obj.user.phone;
      this.userInfos.office = obj.user.office;
      this.userInfos.post = obj.user.post;
      this.userInfos.readFlag = obj.readFlag;
      this.userInfoDialog = true;
    },
    saveNotify(id) {
      this.$http({
        url: "/dlyrl/hr/userinformation/saveNotify",
        method: "post",
        params: {
          userId: id,
          noticeId: this.$route.params.id,
        },
      }).then(({ data }) => {
        if (data.success) {
          this.$message({ message: data.msg, type: "success" });
          this.userInfoDialog = false;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getNotices() {
      this.$http({
        url: "/dlyrl/hr/userinformation/getSystem",
        method: "get",
        params: {
          userId: this.$store.state.user.id,
          systemId: this.meetingId,
        },
      }).then(({ data }) => {
        if (data.success) {
          this.isread = data.isread;
          this.noread = data.noread;
        }
      });
    },
    // 获取会议通知公告Id
    getMeetingId() {
      this.meetingId = this.$route.params.id; //通知公告Id
      this.remark = this.$route.params.remarks;
      //    console.log( this.noticeId)
    },
    // 通知公告详情
    meetingDetails() {
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findSystemContent?id=" +
          this.meetingId +
          "&userId=" +
          this.$store.state.user.id,
        method: "get",
      }).then((res) => {
        // console.log("会议通知详情页面",res);
        this.meetingNotice = res.data.companySystem;
      });
    },
    // 下一页
    lowMeetingNotice() {
      // console.log("当前id",this.meetingId)
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findSystemNext?id=" +
          this.meetingId +
          "&type=" +
          this.lows +
          "&remarks=" +
          this.remark +
          "&userId=" +
          this.$store.state.user.id +
          "&companyId=" +
          this.$store.state.user.companyId,
        method: "get",
      }).then((res) => {
        if (res.data.success) {
          this.meetingNotice = res.data.companySystem;
          this.meetingId = res.data.companySystem.id;
          this.getNotices();
          // console.log("会议通知详情页面id",this.meetingId);
        }
      });
    },
    // 上一页
    upMeetingNotice() {
      // console.log("当前id",this.meetingId)
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findSystemNext?id=" +
          this.meetingId +
          "&type=" +
          this.upp +
          "&remarks=" +
          this.remark +
          "&userId=" +
          this.$store.state.user.id +
          "&companyId=" +
          this.$store.state.user.companyId,
        method: "get",
      }).then((res) => {
        if (res.data.success) {
          this.meetingNotice = res.data.companySystem;
          this.meetingId = res.data.companySystem.id;
          this.getNotices();
          // console.log("会议通知详情页面id",this.meetingId);
        }
      });
    },
    // 返回
    homeMeeting() {
      window.history.go(-1);
      // this.$router.push('/mainhome/mainhome');
    },
  },
  activated() {
    this.getMeetingId();
    this.meetingDetails();
    this.getNotices();
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}

// 顶部会议通知和返回
.top_content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
  font-size: 12px;
}

.top-box {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.top_fan {
  display: flex;
  flex-direction: row-reverse;
}

.fh {
  width: 50px !important;
  height: 30px !important;
  font-size: 12px !important;
  padding: 0 !important;
}

// 会议通知标题
.meetingTitle {
  padding-top: 35px;
  text-align: center;
  font-size: 24px;
  margin: 20px 0;
}

// 中间内容顶部标题
.publisher {
  padding-top: 5px;
  padding-left: 10px;
  font-size: 14px;
  color: #666;
}

.publisher-box {
  width: 80%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  padding-bottom: 15px;
  border-bottom: #d3d3d3 1px solid;
}

.publisher-box-left {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.publisher-box-right {
  width: 50%;
  display: flex;
  flex-direction: row-reverse;
  font-size: 14px;
  color: #666;
}

.meetingContentParent {
  width: 595px;
  height: 640px;
  overflow: hidden;
}

// 会议通知内容
.meetingContent {
  width: 595px;
  height: 640px;
  overflow-y: auto;
  padding: 30px 65px;
  box-sizing: border-box;
  position: relative;
}

.meetingContent::-webkit-scrollbar {
    display: none;
  }

// 上，下一页
.bottom_upper {
  position: absolute;
  bottom: 20px;
  right: 40px;
  display: flex;
  flex-direction: row-reverse;
  font-size: 14px;
}

.bottom_upper button {
  margin-left: 10px;
  cursor: pointer;
}

.el-scrollbar__wrap {
  background: #fff;
}
</style>
